<template>
  <h1>{{ count }}</h1>
  <button @click="handleClick(1)">+1</button>
  <button @click="handleClick(-1)">-1</button>
  <p>has published books</p>
  <span>{{ publishedBooksMessage }}</span>
  <p>message is : {{ message }}</p>
  <input v-model="message" placeholder="eidt me" />
</template>

<script setup>
import { ref, computed } from 'vue'

//  state
const count = ref(0)
const author = ref({
  name: 'John',
  books: []
})
const message = ref('请输入账号')
// life
const publishedBooksMessage = computed(() => {
  return author.value.books.length > 0 ? 'yes' : 'no'
})
// methods
const handleClick = val => {
  count.value += val
  console.log(count.value)
}
</script>

<style lang="scss" scoped></style>
